import React, { useEffect, useState } from "react";
import "./index.less";
import { TRoomBar } from "../../components/RoomBar/type";
import { getRoom } from "../../server/api";
import RoomBar from "../../components/RoomBar";
import NavBar from "../../components/NavBar";
import { useNavigate } from "react-router-dom";
import { Pagination } from "antd";
const StudyRooms: React.FC = ({}) => {
  const navigate = useNavigate();
  const [roomBar, setRoomBar] = useState<TRoomBar[]>();
  const [pgn, setPgn] = useState({
    pageSize: 10,
    current: 1,
    total: 0,
  });
  const getRooms = async () => {
    const res: any = await getRoom({
      pageNum: pgn.current,
      pageSize: pgn.pageSize,
    });
    setRoomBar(res.records);
    setPgn({
      ...pgn,
      pageSize: res.pageSize,
      current: res.current,
      total: res.total,
    });
  };
  const onClickRoom = (name: string, roomId: number) => {
    navigate(`/RoomDetails?roomName=${name}&&roomId=${roomId}`);
  };
  const pgnChange = (value: number) => {
    console.log(value);
    setPgn({ ...pgn, current: value });
  };
  useEffect(() => {
    getRooms();
  }, []);
  return (
    <>
      <NavBar></NavBar>
      <div className="studyroom-ctn">
        <div className="content">
          {roomBar?.map((item: TRoomBar) => (
            <RoomBar
              roomName={item?.roomName}
              roomIntroduce={item?.roomIntroduce}
              roomPhoto={item?.roomPhoto}
              key={item?.id}
              onClickRoom={onClickRoom}
              id={item?.id}
            ></RoomBar>
          ))}
        </div>
        <Pagination
          hideOnSinglePage
          current={pgn.current}
          total={pgn.pageSize}
          pageSize={pgn.total}
          onChange={pgnChange}
        />
      </div>
    </>
  );
};
export default StudyRooms;
